<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<h1>shadow tree</h1>
		<h2>chrome浏览器支持度比较高</h2>
		<p>在浏览器chrome中打开，然后F12打开 Chrome 的开发者工具，点击右上角的“Settings”按钮，勾选“Show user agent shadow DOM”。</p>
		<video width="800" height="400" autoplay="autoplay" controls="controls">
			<source src="../data/iron-man.mp4" type="video/mp4"></source>
			当前浏览器不支持 video直接播放，点击这里下载视频：
			<a href="../data/iron-man.mp4">下载视频</a>
		</video>
		<p>article</p>
		<ol>
			<li>
				<a href="https://aotu.io/notes/2016/06/24/Shadow-DOM/index.html" target="_blank">神奇的Shadow DOM</a>
			</li>
			<li>
				<a href="http://www.ituring.com.cn/article/179915#" target="_blank">Shadow DOM 综述</a>
			</li>
			<li>
				<a href="https://www.html5rocks.com/zh/tutorials/webcomponents/shadowdom-301/" target="_blank">Shadow DOM 301</a>
			</li>
			<li>
				<a href="http://robdodson.me/shadow-dom-the-basics/" target="_blank">Shadow DOM: The Basics</a>
			</li>
			<li>
				<a href="http://robdodson.me/shadow-dom-styles/" target="_blank">Shadow DOM: Styles</a>
			</li>
			<li>
				<a href="http://robdodson.me/shadow-dom-css-cheat-sheet/" target="_blank">Shadow DOM CSS Cheat Sheet</a>
			</li>
			<li>
				<a href="http://robdodson.me/shadow-dom-styles-cont-dot/" target=" _blank ">Shadow DOM: Styles (cont.)</a>
			</li>
			<li>
				<a href="http://robdodson.me/shadow-dom-javascript/" target=" _blank ">Shadow DOM: JavaScript</a>
			</li>
		</ol>
		<p>demo</p>
		<ol>
			<li>
				<a href="sweet.html " target="_blank ">sweet</a>
			</li>
			<li>
				<a href="content-and-template.html " target="_blank ">content and template</a>
			</li>
			<li>
				<a href="shadow-tree-style.html " target="_blank ">shadow tree style</a>
			</li>
			<li>
				<a href="shadow-event-dispatching.html " target="_blank ">shadow event dispatching</a>
			</li>
		</ol>
		<p>test</p>
		<ol>
			<li>
				<a href="../test/test1.html " target="_blank ">test1</a>
			</li>
			<li>
				<a href="../test/test2.html " target="_blank ">test2</a>
			</li>
			<li>
				<a href="../test/test3.html " target="_blank ">test3</a>
			</li>
			<li>
				<a href="../test/test4.html " target="_blank ">test4</a>
			</li>
			<li>
				<a href="../test/test5.html " target="_blank ">test5</a>
			</li>
			<li>
				<a href="../test/test6.html " target="_blank ">test6</a>
			</li>
			<li>
				<a href="../test/test7.html " target="_blank ">test7</a>
			</li>
			<li>
				<a href="../test/test8.html " target="_blank ">test8</a>
			</li>
			<li>
				<a href="../test/test9.html " target="_blank ">test9</a>
			</li>
		</ol>
		<p>术语</p>
		<ol>
			<li>影子 DOM（shadow DOM）：是一种依附于文档原有节点的子 DOM，具有封装性</li>
			<li>光明 DOM（light DOM）：就是原生的 DOM，为了与影子 DOM 区别采用的名词</li>
			<li>影子树（shadow trees）：特指存在于 shadow DOM 中的节点结构</li>
			<li>影子宿主（shadow host）：特指 shadow DOM 所依附的影子宿主，是存在于原生 DOM 中的节点</li>
			<li>影子根（shadow root）：指 shadow DOM 的根节点</li>
			<li>插入点（insertion point）：指 shadow DOM 中的&lt;content&gt;标签</li>
			<li>贪心插入点（greedy insertion point）：指使用通配符选择器进行匹配的插入点</li>
			<li>影子边界（shadow boundary）：指对影子 DOM 与光明 DOM 进行的样式隔离，两者中的样式不会相互影响。</li>
			<li>分布节点（distributed nodes）：指原本存在于光明 DOM 结构中，被&lt;content&gt;标签添加到影子 DOM 中的节点。</li>
		</ol>
		<p>template标签</p>
		<p>
			这个标签目前在非 IE 的浏览器下都得到支持，主要有四个特性：
			<ol>
				<li>惰性：在使用前不会被渲染；</li>
				<li>无副作用：在使用前，模板内部的各种脚本不会运行、图像不会加载等；</li>
				<li>内容不可见：模板的内容不存在于文档中，使用选择器无法获取；</li>
				<li>可被放置于任意位置：即使是 HTML 解析器不允许出现的位置，例如作为 <select> 的子元素。</li>
			</ol>
		</p>
	</body>

</html>